<template>
	<div class="elLoading">
		<div v-if="versionLoading" class="preview-file-loading">
			<div class="loading"></div>
			<div>加载中...</div>
		</div>
		<iframe v-else :src="strUrl" style="width: 100%; height: 100%"></iframe>
		<div
			class="watermark"
			:style="{
				background: 'url(' + watermark + ')',
			}"
		></div>
	</div>
</template>

<script setup>
import { useUserInfoStore } from "/store/userInfo"
const route = useRoute()
const router = useRouter()

// 预览
const versionLoading = ref(true)
const strUrl = ref("")

async function created() {
	try {
		const result = await postAxios(
			"/check/kbDuplicateCheck/fileShow",
			{
				id: route.query.id,
				// vides: [val.id],
			},
			{
				blob: true,
			}
		)
		versionLoading.value = false
		if (result) {
			const blob = new Blob([result], { type: "application/pdf" })
			strUrl.value = "/pdfjs/web/viewer.html?file=" + URL.createObjectURL(blob)
		}
	} catch (error) {}
}
created()

const userInfoStore = useUserInfoStore()
const userInfo = computed(() => userInfoStore.userInfo)
const watermarkText = `${userInfo.value.loginName} ${new Date().getFullYear()}-${
	new Date().getMonth() + 1
}-${new Date().getDate()}`
const watermark = ref("")

function generateWatermark() {
	const canvas = document.createElement("canvas")
	const ctx = canvas.getContext("2d")
	ctx.font = `20px sans-serif`
	const textWidth = ctx.measureText(watermarkText).width + 80
	const textHeight = 150
	canvas.width = textWidth
	canvas.height = textHeight
	ctx.textAlign = "center"
	ctx.font = `20px sans-serif`
	ctx.textBaseline = "middle"
	ctx.fillStyle = "rgba(0, 0, 0, 0.15)"
	ctx.fillText(watermarkText, textWidth / 2, textHeight / 2)
	watermark.value = canvas.toDataURL("image/png")
}

generateWatermark()
</script>

<style lang="scss" scoped>
.elLoading {
	height: 100vh;
	.preview-file-loading {
		width: 100%;
		max-height: 100vh;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 0;
		background-color: #d4d4d7;
		.loading {
			width: 45px;
			height: 45px;
			display: inline-block;
			padding: 0px;
			border-radius: 100%;
			border: 5px solid;
			border-top-color: rgba(41, 114, 250, 1);
			border-bottom-color: rgba(41, 114, 250, 0.1);
			border-left-color: rgba(41, 114, 250, 1);
			border-right-color: rgba(41, 114, 250, 0.1);
			animation: loading-animation 1s ease-in-out infinite;
		}

		@keyframes loading-animation {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}
	}
}
.watermark {
	position: absolute;
	top: -50%;
	bottom: 0;
	right: 0;
	left: -50%;
	z-index: 99;
	width: 200%;
	height: 200%;
	pointer-events: none;
	transform: rotate(-45deg);
	transform-origin: center;
}
</style>
